<template>
  <a-form ref="form" :model="formData" :rules="rules" layout="vertical">
    <div class="form__box">
      <a-form-item :label="`数据绑定key`" field="dataIndex" >
        <template v-if="dataObj.mode === 'dataView'">
          <a-select v-model="formData.dataViewSel" allow-clear @change="changeDataViewSel">
            <a-option value="手填">手填</a-option>
            <a-option v-for="option in dataObj.queryGroupList" :key="option.groupId + ' ' + option.queryKey" :value="option.groupId + ' ' + option.queryKey" :disabled="dataObj.pageData.some(item => item.formData.dataIndex === option.groupId + ' ' + option.queryKey)" :title="(option.formName ? `${option.formName}_${option.columnName}` : option.columnName) + (option.aggregateId ?`（${option.funColumnAs}的函数条件）`:'')">{{ option.formName ? `${option.formName}_${option.columnName}` : option.columnName }}{{ option.aggregateId ?`（${option.funColumnAs}函数条件）`:'' }}</a-option>
          </a-select>
          <a-input v-model="formData.dataIndex" :disabled="formData.dataViewSel !=='手填'"></a-input>
        </template>
        <a-input v-else v-model="formData.dataIndex" :disabled="formData.notMod"></a-input>
        <!--        <field-linkage :formData="formData"></field-linkage>-->
      </a-form-item>
      <a-form-item :label="`字段名称`" field="name">
        <a-input v-model="formData.name"></a-input>
        <a-checkbox v-model="formData.hideTitle">隐藏标题</a-checkbox>
      </a-form-item>
      <a-form-item :label="`控件类型`" field="type">
        <a-select v-model="formData.type" @change="changeControlTypes($event,formData)">
          <a-option :value="item.value" v-for="item in typeOptions" :key="item.value">
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`数据类型`" field="dataType">
        <a-select v-model="formData.dataType">
          <a-option :value="item.value" v-for="item in dataTypeOptions" :key="item.value">
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`表单栅格`" field="defaultValue">
        <a-input-number :step="1" :max="24" :min="6" v-model="formData.wrapperCol"></a-input-number>
      </a-form-item>
      <a-form-item :label="`校验`" field="changeRule">
        <a-checkbox v-model="formData.required">必填</a-checkbox>
        <a-select v-if="formData.required" v-model="formData.changeRule">
          <a-option value="notNull">无</a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`字段说明`" field="explain">
        <a-textarea v-model="formData.explain"></a-textarea>
      </a-form-item>
    </div>
  </a-form>
</template>
<script>
import { basicDefaultData, tagColorList, typeOptions } from './../base/options'
import FieldLinkage from '@/components/Form/base/fieldLinkage.vue'
import { changeControlTypes, changeDataViewSel } from '@/mixins/methodsMixins'
export const defaultData = () => ({
  ...basicDefaultData(),
  name: '计算公式',
  type: 'countFormula',
  wrapperCol: 24,
  explain: ''
})
export const dataTypeOptions = [
  {
    label: 'string',
    value: 'string'
  },
  {
    label: 'long',
    value: 'long'
  }
]
export default {
  name: 'CountFormulaInfo',
  components: { FieldLinkage },
  inject: ['dataObj'],
  data () {
    return {
      rules: {
        dataIndex: [{ required: true, message: '必填' }],
        name: [{ required: true, message: '必填' }]
      },
      dataTypeOptions,
      tagColorList,
      typeOptions
    }
  },
  computed: {
    formData () {
      return this.dataObj.pageData[this.dataObj.selectIndex]?.formData || {}
    }
  },
  watch: {
    formData: {
      immediate: true,
      handler (newVal) {
        if (newVal.name === undefined) {
          this.dataObj.pageData[this.dataObj.selectIndex].formData = defaultData()
          console.log('input', this.dataObj.pageData[this.dataObj.selectIndex].formData)
        }
      }
    }
  },
  methods: {
    changeDataViewSel,
    changeControlTypes
  }
}
</script>

<style scoped lang="less">

</style>
